<template>
  <div class="msg_reply">

    <el-card class="content">
      <el-table :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="序号" width="80" align="center" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="回复人" align="center">
          <template slot-scope="scope">
            {{ scope.row.user && scope.row.user.name || "(用户已注销)" }}
          </template>
        </el-table-column>
        <el-table-column label="被回复人" align="center">
          <template slot-scope="scope">
            {{ scope.row.replyUser && scope.row.replyUser.name || "(用户已注销)" }}
          </template>
        </el-table-column>
        <el-table-column label="回复内容">
          <template slot-scope="scope">
            {{scope.row.content}}
          </template>
        </el-table-column>
        <el-table-column label="源自" align="center">
          <template slot-scope="scope">
            {{scope.row.messageId?'留言ID：' + scope.row.messageId:'评论ID：'+scope.row.commentId}}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{
              scope.row.status | statusFilterText
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="200" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" v-show="scope.row.status != 1" type="primary" @click="changeStatus(scope.row.id, 1)">审核通过</el-button>
            <el-button size="mini" v-show="scope.row.status != 2" type="warning" @click="changeStatus(scope.row.id, 2)">审核不通过</el-button>
            <el-popconfirm style="margin-left:10px;" title="该留言内容确定删除吗？" @confirm="handleDelete(scope.row.id)">
              <el-button slot="reference" size="mini" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background :current-page.sync="page" layout="total, prev, pager, next" :total="count" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ReplyList',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
        2: 'warning',
      }
      return statusMap[status]
    },
    // 评论状态：0-审核中,1-审核通过,2-审核不通过
    statusFilterText(status) {
      const statusMap = {
        0: '待审核',
        1: '审核通过',
        2: '审核不通过',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      count: 0,
      page: 1,
      size: 10
    }
  },
  created() {
    this.getReplyList()
  },
  methods: {
    // 自定义表格索引
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1
    },
    // 获取回复
    async getReplyList(page) {
      this.$api.httpReplyList({page}).then((res) => {
        if (res.code == 200) {
          this.list = res.data.rows
          this.count = res.data.meta.count
        }
      })
    },
    // // 更新回复评论-审核状态
    changeStatus(id, status) {
      this.$api.httpReplyCheck({ id, status }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.getReplyList()
        }
      })
    },
    // 删除回复数据
    handleDelete(id) {
      this.$api.httpReplyDelete(id).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.getReplyList()
        }
      })
    },
    // Markdown语法解析
    mdRender(content) { },
    // 搜索
    searchData() { },
    // 点击页码
    handleCurrentChange(page) { 
      this.getReplyList(page)
    },
    // 重置表单
    resetSearchData() {
      this.$refs['searchForm'].resetFields()
      this.getReply()
    },
  },
}
</script>

<style scoped lang="scss">
.search {
  margin-bottom: 14px;
}
.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
</style>
